<template>
  <div>
    <a-menu
      :default-open-keys="dakai"
      :openKeys="openKeys"
      :selectedKeys="selectedKeys"
      @openChange="openChange"
      mode="horizontal"
    >
      <template v-for="item in menus">
<!--        v-if="!item.children"-->
        <a-menu-item
          @click="gotoRouter1(item.name, item.meta, $route)"
          :key="item.name"
        >
          <span class="flex flex-y-center">
            <span class="anticon" v-if="item.hideInMenu">
              <my-icon
                :type="item.hideInMenu"
                style="width: 16px; height: 16px"
              ></my-icon>
            </span>
            <span> {{ item.meta.title }}</span>
          </span>
        </a-menu-item>
<!--        <a-sub-menu v-else :key="item.name">
          <span slot="title">
            <span class="anticon" v-if="item.meta.icon">
              <my-icon
                :type="item.meta.icon"
                style="width: 16px; height: 16px"
              ></my-icon>
            </span>
            <span> {{ item.meta.title }}</span></span
          >
          &lt;!&ndash;          <template v-for="subitem in item.children">
                      <a-menu-item
                        v-if="!subitem.children"
                        @click="gotoRouter(subitem.name, item.meta, $route)"
                        :key="subitem.name"
                      >
                        <span>
                          {{ subitem.meta.title }}
                        </span>
                      </a-menu-item>
                    </template>&ndash;&gt;
        </a-sub-menu>-->
      </template>
    </a-menu>
    <slot></slot>
  </div>
</template>
<script>
import {mapState} from "vuex";
import {getToken} from "@/libs/util";

export default {
  props: {
    menus: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      dakai: ["home"],
      openKeys: [""],
      selectedKeys: ["home"],
    };
  },
  watch: {
    menuListData: {
      handler(val, oldval) {

      },
      // 深度观察监听
      deep: true,
    },
    $route: {
      handler(val, oldval) {
        this.selectedKeys = [localStorage.getItem("menus")];
        this.xhmenu();
      },
      // 深度观察监听
      deep: true,
    },
  },
  computed: {
    ...mapState({
      menuListData: (state) => state.app.menuListData,
    }),
  },
  created() {
    this.$store.dispatch("setMenu", localStorage.getItem("menus"));
    this.morRen();
  },
  mounted() {
    this.xhmenu();
  },
  methods: {
    morRen() {
      let menuData = localStorage.getItem("menus");
      if (menuData) {
        this.selectedKeys = [localStorage.getItem("menus")];
        this.dakai = [localStorage.getItem("menus")];
      }
    },
    gotoRouter1(url, data, data1) {
      console.log('点击tab栏了');
      console.log(url);
      const token = getToken()
      if (!token && url !== "login") {
        this.$router.push({
          name: "login",
        });
        return;
      }
      this.openKeys = [""];
      this.selectedKeys = [url];
      localStorage.setItem("menus", url);
      this.$router.push({
        name: url,
      });
    },
    gotoRouter(url, data, data1) {
      const token = getToken()
      if (!token && url !== "login") {
        this.$router.push({
          name: "login",
        });
        return;
      }
      this.selectedKeys = [url];
      localStorage.setItem("menus", url);
      this.$router.push({
        name: '/' + url,
        query: {
          page: url,
        },
      });
    },
    openChange(openKeys) {
      if (openKeys.length !== 0) {
        this.openKeys = [openKeys[1]];
      } else {
        this.openKeys = [""];
      }
    },
    xhmenu() {
      let Menus = this.menus;
      let url = localStorage.getItem("menus");
      for (let i = 0; i < Menus.length; i++) {
        if (Menus[i].children) {
          for (let y = 0; y < Menus[i].children.length; y++) {
            if (Menus[i].children[y].name == url) {
              this.openKeys = [Menus[i].name];
            }
          }
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .ant-menu-horizontal {
  border: none;
}

/deep/ .ant-menu {
  background: transparent;
  color: #ffffff;
}

/deep/ .ant-menu-horizontal > .ant-menu-item,
/deep/ .ant-menu-horizontal > .ant-menu-submenu {
  margin-right: 40px;
}

/deep/ .ant-menu-item, /deep/ .ant-menu-submenu-title {
  padding: 0;
  color: #ffffff;
}

/deep/ .ant-menu-submenu-title:hover {
  color: #ffffff;
}

/deep/ .ant-menu-horizontal > .ant-menu-item:hover,
/deep/ .ant-menu-horizontal > .ant-menu-submenu:hover,
/deep/ .ant-menu-horizontal > .ant-menu-item-active,
/deep/ .ant-menu-horizontal > .ant-menu-submenu-active,
/deep/ .ant-menu-horizontal > .ant-menu-item-open,
/deep/ .ant-menu-horizontal > .ant-menu-submenu-open,
/deep/ .ant-menu-horizontal > .ant-menu-item-selected,
/deep/ .ant-menu-horizontal > .ant-menu-submenu-selected {
  color: #ffffff;
  // border-bottom: 2px solid #ffffff;
  font-weight: bold;
}
</style>
